import { Button, Card, Form, Select, Space, Table, Typography } from "antd";
import type { TableProps } from "antd";
import { useAntdTable } from "ahooks";
import { getKnowledgeList } from "../../api/knowledge";
import useUrlState from "@ahooksjs/use-url-state";

const { Text } = Typography;

const defaultParams = {
  current: 1,
  size: 10,
  phaseId: undefined,
  hasNote: undefined,
  type: undefined,
  difficulty: undefined,
};

const KnowledgePage = () => {
  const [form] = Form.useForm();
  const [state, setState] = useUrlState(defaultParams);

  const getList = async ({ current, pageSize }: any, params: any) => {
    const p = { ...params, current, size: pageSize };
    setState(p);
    const r = await getKnowledgeList(p);
    return { total: r.data.total, list: r.data.records };
  };

  const { tableProps, search } = useAntdTable(getList, {
    form,
  });

  const columns: TableProps<knowledge>["columns"] = [
    {
      title: "id",
      dataIndex: "knowledgeId",
      key: "knowledgeId",
    },
    {
      title: "知识点名称",
      dataIndex: "knowledgeName",
    },
    {
      title: "学段",
      dataIndex: "phaseName",
    },
    {
      title: "科目",
      dataIndex: "subjectName",
    },
    {
      title: "难度",
      dataIndex: "difficulty",
    },
    {
      title: "类型",
      dataIndex: "type",
      render: (_, record) => {
        const text = record.type == 0 ? "知识点" : "单词";
        // @ts-ignore
        return <Text>{text}</Text>;
      },
    },
    {
      title: "学霸笔记",
      dataIndex: "knowledgeNoteStatus",
      render: (_, record) => {
        const type = record.knowledgeNoteStatus ? "success" : "warning";
        // @ts-ignore
        return (
          <Text type={type}>{record.knowledgeNoteStatus ? "有" : "没有"}</Text>
        );
      },
    },
  ];

  return (
    <>
      <Card className="mb-3">
        <Form form={form} initialValues={state} layout="inline">
          <Space size={[8, 16]} wrap>
            <Form.Item label="学段" name="phaseId">
              <Select allowClear placeholder="请选择" className="min-w-60">
                <Select.Option value="1">小学</Select.Option>
                <Select.Option value="2">初中</Select.Option>
                <Select.Option value="3">高中</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="类型" name="hasNote">
              <Select allowClear placeholder="请选择" className="min-w-60">
                <Select.Option value="1">单词</Select.Option>
                <Select.Option value="0">知识点</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="学霸笔记" name="type">
              <Select allowClear placeholder="请选择" className="min-w-60">
                <Select.Option value="1">有</Select.Option>
                <Select.Option value="0">没有</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="难度" name="difficulty">
              <Select allowClear placeholder="请选择" className="min-w-60">
                <Select.Option value="1">1</Select.Option>
                <Select.Option value="2">2</Select.Option>
                <Select.Option value="3">3</Select.Option>
                <Select.Option value="4">4</Select.Option>
                <Select.Option value="5">5</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="">
              <Button onClick={search.submit} type="primary">
                搜索
              </Button>
            </Form.Item>
          </Space>
        </Form>
      </Card>

      <Card>
        <Table
          columns={columns}
          rowKey="knowledgeId"
          {...tableProps}
          // pagination={{ showTotal: (total) => `共 ${total} 条` }}
        />
      </Card>
    </>
  );
};

export default KnowledgePage;
